<template>
  <view class="box" @click="goPage('/pages/home/doctorDetails')">
    <image src="" mode="aspectFill" />
    <view class="r">
      <view class="top">
        <view class="l">
          <view class="tit">
            想过风
            <view class="label">金牌专家</view>
          </view>
          <view class="fx"> 咨询方向 <text>骨科</text> </view>
        </view>
        <view class="btn">私信联系</view>
      </view>
      <view class="jj">
        <view class="lb"> 医生简介 </view>
        <view>张三，主治医师，学士学位，毕业于郑州大学临床医学系。从事妇科工作十余年，曾在郑大一附院深 </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { goPage } from "@/utils/commonFn";
</script>
<style lang="less" scoped>
.box {
  border-bottom: 1rpx solid #f3f4f6;
  display: flex;
  margin-bottom: 32rpx;
  image {
    width: 96rpx;
    height: 96rpx;
    border: 2rpx solid #81d8d0;
    border-radius: 50%;
    margin-right: 20rpx;
  }
  .r {
    width: calc(100% - 116rpx);
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .l {
        .tit {
          display: flex;
          align-items: center;
          font-size: 30rpx;
          color: #333333;
          .label {
            background: #feeacf;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            font-size: 24rpx;
            color: #b68f54;
            padding: 8rpx;
            margin-left: 26rpx;
          }
        }
        .fx {
          font-size: 24rpx;
          color: #8a8a8d;
          gap: 8rpx;
          margin-top: 10rpx;
          text {
            background: #f6f9ff;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            padding: 8rpx;
          }
        }
      }
      .btn {
        width: 144rpx;
        height: 50rpx;
        background: #81d8d0;
        border-radius: 200rpx 200rpx 200rpx 200rpx;
        font-size: 24rpx;
        color: #ffffff;
        text-align: center;
        line-height: 50rpx;
      }
    }
    .jj {
      display: flex;
      font-size: 24rpx;
      color: #333333;
      margin-top: 26rpx;
      margin-bottom: 32rpx;
      .lb {
        flex-shrink: 0;
        font-size: 24rpx;
        color: #8a8a8d;
        width: 110rpx;
      }
    }
  }
}
</style>
